<template>
  <div class="flex-1 page_contain">
    <div class="app-container">
      <!-- 搜索框 -->
      <div class="search-container">
        <el-form :model="searchParam" :inline="true" label-width="40px">
          <el-form-item class="w-[100px]">
            <el-select
              v-model="searchParam.year"
              placeholder="请选择年份"
              filterable
              :suffixIcon="() => '年'"
            >
              <el-option
                v-for="item in yearOptions"
                :key="item"
                :value="item"
                :label="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="w-[100px]">
            <el-select
              v-model="searchParam.month"
              placeholder="请选择月份"
              filterable
              :suffixIcon="() => '月'"
            >
              <el-option
                v-for="item in useDictionary('MonthList')"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <i-ep-search />
              搜索
            </el-button>
            <el-button @click="handleReset">
              <i-ep-refresh />
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 列表 -->
      <el-tabs
        v-if="tabList.length"
        type="border-card"
        @tab-click="tabClickHandle"
        v-model="activeTabs"
      >
        <el-tab-pane
          v-for="(item, index) in tabList"
          :key="index"
          :label="item.label"
          class="chart_tab"
          lazy
        >
          <!-- <div>{{ item.value }}. {{ item.label }}</div> -->
          <div v-if="!loading" class="h-full">
            <div v-if="activeTabs == '0'">
              <pcmMonitorReport-all
                :year="searchedParam.year"
                :month="searchedParam.month"
                :params="reportData"
                :activeTabs="index.toString()"
              />
            </div>
            <div v-if="activeTabs != '0'">
              <pcmMonitorReport-month
                :year="searchedParam.year"
                :month="searchedParam.month"
                :params="reportData"
                :activeTabs="index.toString()"
                :key="index"
              />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import request from "@/utils/request";
import { useDictionary } from "@/utils/useTable";
import dayjs from "dayjs";

defineOptions({
  name: "PCMPCMMONITORREPORT",
  inheritAttrs: false,
});

// 获取工段列表
const tabList = ref<any>([]);
const activeTabs = ref("0");
async function getTabList() {
  const { data } = await request({
    url: "/dmpDosPcm/pcmOrderMonitorReport/getWorkshopSections",
    method: "post",
    data: {},
  });
  let list: any = [];
  data?.map((item: string, index: number) => {
    list.push({
      value: index.toString(),
      label: item,
    });
  });
  tabList.value = list;
  handleSearch();
}

// 获取年度列表
const yearOptions = ref();
async function getYears() {
  const { data } = await request({
    url: "/system/dateInfo/getYearList",
    method: "post",
    data: {},
  });
  yearOptions.value = data;
}

function handleReset() {
  searchParam.year = dayjs().year().toString();
  (searchParam.month = (dayjs().month() + 1).toString()), handleSearch();
}

const reportData = ref({});
const loading = ref(true);

async function handleSearch() {
  setTimeout(async () => {
    reportData.value = {};
    loading.value = true;
    Object.assign(searchedParam, searchParam);
    const { data } = await request({
      url: `/dmpDosPcm/pcmOrderMonitorReport/query`,
      method: "post",
      data: {
        workshopSectionCode: tabList.value[Number(activeTabs.value)].label,
        year: searchParam.year,
        month: searchParam.month,
      },
    }).finally(() => {
      loading.value = false;
    });
    reportData.value = data;
  }, 0);
}

// tab点击事件
function tabClickHandle(e: any) {
  reportData.value = {};
  handleSearch();
}

// 请求参数
// const requestApi = "/dmpDosPcm/psmprocessdata/queryByPage";

const searchParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
});

const searchedParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
});

onMounted(() => {
  getYears();
  getTabList();

  //   getTableList();
});
</script>

<style lang="scss" scoped>
:deep(.app-container .el-tabs--border-card) {
  box-shadow: 0px 0px 12px rgba(3, 8, 72, 0.08);
  border: none;
  .el-tabs__content {
    height: calc(100vh - 120px - 80px - 34px);
    overflow-y: auto;
  }
  .el-loading-spinner {
    margin-top: 200px;
  }
}
:deep(.search-container) {
  .el-form-item {
    margin-right: 14px;
  }
  .el-select .el-input .el-select__caret.el-icon {
    font-style: normal;
    transform: none !important;
  }
}
</style>
